import { BrowserRouter, Routes, Route } from "react-router-dom";
// import "@arco-design/web-react/dist/css/arco.css"; // 引入 Arco Design 样式

import { RouteMonitor } from "@/components/RouteMonitor";
import Login from "@/pages/Login";
import Register from "@/pages/Register";
import NotFound from "@/pages/NotFound";
import SlideList from "@/pages/Slide/list";
import SlideDetail from "@/pages/Slide/detail";
import SlideRead from "@/pages/Slide/read";

function App() {
  return (
    <>
      <BrowserRouter>
        <RouteMonitor />
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/dashboard" element={<SlideList />} />
          <Route path="/slide/detail" element={<SlideDetail />} />
          <Route path="/slide/read" element={<SlideRead />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
      {/* 默认的全局--样式 */}
      <style>{`
        html,
        body,
        #root {
          height: 100%;
          overflow: hidden;
          margin: 0;
          padding: 0;
        }
        div {
          box-sizing: border-box;
        }  
        ::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        ::-webkit-scrollbar-track {
          background: rgba(187, 187, 187, 0.25);
          border-radius: 6px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
        }
        ::-webkit-scrollbar-thumb {
          background: rgba(187, 187, 187, 0.5);
          border-radius: 6px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
        }
      `}</style>
    </>
  );
}

export default App;
